<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计价规则</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<!--App自定义的css-->
<link rel="stylesheet" href="__PUBLIC__/css/aui.css">
</head>
<style>
body {
	padding: 0px;
	margin: 0px;
}
.zhuanchepic img {
	width: 100%;
	height: auto;
}
.jijia {
	background: #fff;
	margin: 0px 40px;
}
.jijia .half span {
	display: inline-block;
	width: 50%;
}
.jijia p {
	margin: 10px 0px;
}
.jijia .title {
	display: block;
	text-align: center;
	border-bottom: 1px solid #e6e6e6;
	height: 20px;
	line-height: 20px;
	margin-bottom: 30px;
}
.jijia p.color {
	color: #1aad19;
}
.jijia .title span {
	display: inline-block;
	background: #fff;
	height: 40px;
	line-height: 40px;
	padding: 0px 10px;
}
.jijia .table {
	background: #fff;
}
.jijia .table table {
	width: 100%;
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
	color: #999;
}
.jijia .table table td {
	border-bottom: 1px solid #ddd;
	border-right: 1px solid #ddd;
	height: 30px;
	line-height: 30px;
	padding-left: 5px;
	width: 50%;
}
.content .select {
	width: 100px;
	height: 36px;
	background: #f0f0f0;
	margin: 0px auto;
	position: relative;
	cursor: pointer;
	margin-bottom:10px;

}
.content .select::after {
	content: "";
	display: block;
	border-width:5px;
	border-style:solid;
	border-color:#666 transparent transparent transparent;
	top: 15px;
	right: 12px;
	position: absolute;
}
.content .select p {
	height:36px;
	line-height: 36px;
	font-size: 16px;
	font-family: "microsoft yahei";
		color:#1aad19;
	padding: 0px 15px;
		border-radius:2px;
}
.content .select ul {
	width: 70px;
	display: block;
	font-size: 16px;
	background: #e9e9e9;
	position: absolute;
	top: 40px;
	left: 0px;
	max-height: 0px;
	overflow: hidden;
	margin:0px; padding:0px 15px;
	border-radius:2px;
}
.content .select ul li {
	width: 100%;
	height: 30px;
	line-height: 30px;
	list-style: none;
	color: #666666;
}
.content .select.open ul {
	max-height: 250px;
}
</style>
<body style="background:#fff ! important;">
<div class="zhuanchepic"><img src="__PUBLIC__/web/images/zhuanchepic.png"></div>
<div class="content">
  <div class="select">
  	<div class="aui-list-item-input">
        <select style="padding: 10px">
			 <volist name="list" id="v">
		      <option value="{$v.region_id}" <if condition="$data['zone_id'] eq $v['zone_id']">selected</if> >{$v.zone_name}</option>
		    </volist>
         
          
        </select>
    </div>
<!--     <p data-value="{$data['zone_name']}">{$data['zone_name']}</p>
    <ul>
    <volist name="list" id="v">
      <li data-value="{$v.zone_name}" rel="{$v.region_id}" <if condition="$data['zone_id'] eq $v['zone_id']">class="Selected"</if> >{$v.zone_name}</li>
    </volist> -->

    </ul>
  </div>
</div>
<div class="jijia">
  <div class="title"> <span>出租车</span> </div>
  <p class="half">以出租车计价器为准</p>
  <div class="title"> <span>小马专车</span> </div>
  <p class="half"><span>起步价</span><span>{$data['val_init']/100|sprintf='%.2f',###}元 </span></p>
  <p>里程费（分时段） </p>
  <div class="table">
    <table cellpadding="0" cellspacing="0">
      <tr>
        <td>普通时段</td>
        <td align="right" style="padding-right:5px;"> {$data['mile_price']/100|sprintf='%.2f',###}元/公里</td>
      </tr>
      <tr>
        <td>00:00-06:30 </td>
        <td align="right" style="padding-right:5px;">{$data['mile_price']/100|sprintf='%.2f',###}元/公里</td>
      </tr>
      <tr>
        <td>23:00-00:00 </td>
        <td align="right" style="padding-right:5px;">{$data['mile_price']/100|sprintf='%.2f',###}元/公里</td>
      </tr>
    </table>
  </div>
  <p class="color">*每0.1公里结算</p>
  <p>时长费</p>
  <div class="table">
    <table cellpadding="0" cellspacing="0">
      <tr>
        <td>普通时段</td>
        <td align="right" style="padding-right:5px;">{$data['minute']/100|sprintf='%.2f',###}元/分钟</td>
      </tr>
    </table>
  </div>
</div>
<script src="__PUBLIC__/js/jquery.js"></script> 
<script>
	$(function(){
		// $(".select p").click(function(e){

		// 	$(".select").toggleClass('open');
		// 	e.stopPropagation();
		// });
		
		$("select").change(function(e){
			// var _this=$(this);
			// $(".select > p").text(_this.attr('data-value'));
			// $(".select").removeClass("open");
			// e.stopPropagation();
			var region_id = $(this).val();
			console.log(region_id)
			location="/index/other/computer_price?region_id="+region_id
		});
		
		// $(document).on('click',function(){
		// 	$(".select").removeClass("open");
		// })
		
	});
</script>
</body>
</html>
